<script>
export default {
  name: 'IndicatorLibraryReport',
  props: {
    queryParams: {
      required: false,
      default: null
    }
  },
  watch: {
    queryParams: {
      async handler(val) {
        if (val.sceneProjectId != null) {
          const param = {
            sceneProjectId: val.sceneProjectId,
            statisticsMode: val.statisticsMode,
            solidifyDateStart: val.startTime,
            solidifyDateEnd: val.endTime
          }
          const res = await this.$api.carbonEmissionReport.carbonEmissionFactor(param)
          this.carbonEmissionsList = res.data
          const emissionReductionFactorRes = await this.$api.carbonEmissionReport.emissionReductionFactor(param)
          this.carbonReductionList = emissionReductionFactorRes.data
          const carbonSinkRes = await this.$api.carbonEmissionReport.carbonSinkFactor(param)
          this.carbonSinkList = carbonSinkRes.data
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      carbonEmissionsList: [],
      carbonReductionList: [],
      carbonSinkList: []
    }
  }
}
</script>

<template>
  <div>
    <h2>04 指标库</h2>
    <div class="indicator-lib-box">
      <div>
        <h3>4.1 碳排放因子库</h3>
        <table>
          <thead>
          <tr>
            <th>数据时间</th>
            <th>能源种类</th>
            <th>碳排因子值</th>
            <th>单位</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in carbonEmissionsList" :key="`${item.solidifyDate}_${index}`">
            <td>{{ item.solidifyDate }}</td>
            <td>{{ item.energyTypeName }}</td>
            <td>{{ item.factor }}</td>
            <td>{{ item.unit }}</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div>
        <h3>4.2 碳减因子库</h3>
        <table>
          <thead>
          <tr>
            <th>数据时间</th>
            <th>能源种类</th>
            <th>碳减因子值</th>
            <th>单位</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in carbonReductionList" :key="`${item.solidifyDate}_${index}`">
            <td>{{ item.solidifyDate }}</td>
            <td>{{ item.energyTypeName }}</td>
            <td>{{ item.factor }}</td>
            <td>{{ item.unit }}</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div>
        <h3>4.3 碳汇因子库</h3>
        <table>
          <thead>
          <tr>
            <th>数据时间</th>
            <th>能源种类</th>
            <th>碳汇因子值</th>
            <th>单位</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in carbonSinkList" :key="`${item.solidifyDate}_${index}`">
            <td>{{ item.solidifyDate }}</td>
            <td>{{ item.type }}</td>
            <td>{{ item.factor }}</td>
            <td>{{ item.unit }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.indicator-lib-box {
  margin: 0 5%;

  table {
    border-collapse: collapse;
    width: 95%;
    margin: 0 5%;
    font-size: 16px;
    font-weight: 500;

    th {
      border: 1px solid rgba(0, 0, 0, 0.6);
      padding: 6px 10px;
      background-color: rgb(2, 149, 144);
      text-align: center;
    }

    td {
      border: 1px solid #000000;
      padding: 6px 10px;
      text-align: center;
    }
  }
}
</style>
